<template>
  <div class="appeal-management">
    <!-- 查询区域 -->
    <el-card style="margin-bottom: 10px">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="用户名">
            <el-input v-model="queryParams.username" placeholder="请输入用户账号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户邮箱">
            <el-input v-model="queryParams.email" placeholder="请输入用户邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态">
            <el-select v-model="queryParams.state" placeholder="请选择状态" clearable>
              <el-option label="待审核" :value="0" />
              <el-option label="已通过" :value="1" />
              <el-option label="已拒绝" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button @click="resetQuery">重置</el-button>
            <el-button type="primary" @click="getAppealList">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!-- 申诉列表表格 -->
    <el-card>
      <el-table :data="appealList" style="width: 100%" :loading="loading">
        <el-table-column prop="id" label="审核ID" width="180" />
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="reason" label="申诉理由" width="200" show-overflow-tooltip />
        <el-table-column prop="state" label="审核状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStateTagType(row.state)">
              {{ getStateText(row.state) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="auditTime" label="审核时间" width="160" />
        <el-table-column prop="auditOpinion" label="审核意见" show-overflow-tooltip />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button
                v-if="row.state === 0"
                type="primary"
                size="small"
                @click="showAuditDialog(row)"
            >
              审核
            </el-button>
            <el-button
                v-else
                type="info"
                size="small"
                disabled
            >
              已审核
            </el-button>
            <el-button
                type="danger"
                size="small"
                @click="deleteAppeal(row.id)"
            >
              删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          style="margin-top: 20px"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          :current-page="paginationConfig.current"
          :total="paginationConfig.total"
          :page-size="paginationConfig.pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 审核对话框 -->
    <el-dialog
        title="申诉审核"
        v-model="auditDialogVisible"
        width="500px"
        @close="resetAuditForm"
    >
      <el-form :model="auditForm" label-width="80px">
        <el-form-item label="申诉ID">
          <el-input v-model="auditForm.id" disabled />
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input v-model="auditForm.username" disabled />
        </el-form-item>
        <el-form-item label="申诉理由">
          <el-input v-model="auditForm.reason" type="textarea" disabled />
        </el-form-item>
        <el-form-item label="审核结果" prop="state" required>
          <el-radio-group v-model="auditForm.state">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="auditOpinion">
          <el-input
              v-model="auditForm.auditOpinion"
              type="textarea"
              :rows="3"
              placeholder="请输入审核意见"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAudit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/utils/request";

// 查询参数
const queryParams = ref({
  username: "",
  state: undefined,
  email:""
});

// 申诉列表
const appealList = ref([]);
const loading = ref(false);

// 分页配置
const paginationConfig = ref({
  pageSize: 10,
  total: 0,
  current: 1
});

// 审核对话框
const auditDialogVisible = ref(false);
const auditForm = ref({
  id: null,
  state: undefined, // 1通过 2拒绝
  auditOpinion: ""
});

// 获取申诉列表
const getAppealList = async () => {
  loading.value = true;
  try {
    const params = {
      ...queryParams.value,
      current: paginationConfig.value.current,
      pageSize: paginationConfig.value.pageSize
    };


    const res = await request.post("/api/appeal/listPage", params);
   //@ts-ignore
    if (res.code === 200) {
      appealList.value = res.data.records;
      paginationConfig.value.total = parseInt(res.data.total);
    } else {
      //@ts-ignore
      ElMessage.error(res.message || "获取申诉列表失败");
    }
  } catch (error) {
    ElMessage.error("获取申诉列表失败");
  } finally {
    loading.value = false;
  }
};

// 重置查询条件
const resetQuery = () => {
  queryParams.value = {
    username: "",
    state: undefined,
    email:""
  };
  paginationConfig.value.current = 1;
  getAppealList();
};

// 显示审核对话框
const showAuditDialog = (row) => {
  auditForm.value = {
    id: row.id,
    username: row.username,
    reason: row.reason,
    //@ts-ignore
    state: 1,
    auditOpinion: ""
  };
  auditDialogVisible.value = true;
};

// 提交审核
const submitAudit = async () => {
  if (!auditForm.value.auditOpinion) {
    ElMessage.warning("请填写审核意见");
    return;
  }

  try {
    const res = await request.post("/api/appeal/audit", auditForm.value);
    //@ts-ignore
    if (res.code === 200) {
      ElMessage.success("审核成功");
      auditDialogVisible.value = false;
      await getAppealList();
    } else {
      //@ts-ignore
      ElMessage.error(res.message || "审核失败");
    }
  } catch (error) {
    ElMessage.error("审核失败");
  }
};

// 重置审核表单
const resetAuditForm = () => {
  auditForm.value = {
    id: null,
    username: "",
    reason: "",
    //@ts-ignore
    state: 1,
    auditOpinion: ""
  };
};

// 分页处理
const handleSizeChange = (size: number) => {
  paginationConfig.value.pageSize = size;
  getAppealList();
};

const handleCurrentChange = (page: number) => {
  paginationConfig.value.current = page;
  getAppealList();
};

// 获取状态标签类型
const getStateTagType = (state) => {
  switch (state) {
    case 0: return "warning";  // 待审核
    case 1: return "success";  // 通过
    case 2: return "danger";   // 拒绝
    default: return "info";
  }
};

// 获取状态文本
const getStateText = (state) => {
  switch (state) {
    case 0: return "待审核";
    case 1: return "已通过";
    case 2: return "已拒绝";
    default: return "未知状态";
  }
};

//删除申诉
//deleteAppeal(row.id)
const deleteAppeal = async (id: number) => {
  console.log("删除的id is ", id)
  try {
    // 使用ElMessageBox确认删除
    await ElMessageBox.confirm(
        '确定要删除这条申诉记录吗？删除后将无法恢复！',
        '删除确认',
        {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning',
          center: true, // 居中显示
          customClass: 'delete-confirm-box' // 自定义样式类
        }
    )
    const res = await request.get(`/api/appeal/removeByIds?ids=${id}`)
    //@ts-ignore
    if (res.code === 200) {
      ElMessage.success({
        message: '申诉记录删除成功',
        duration: 1500,
        showClose: true
      })
      await getAppealList()
    } else {
      ElMessage.error({
        //@ts-ignore
        message: res.message || '删除申诉失败',
        duration: 2000,
        showClose: true
      })
    }
  } catch (error) {
    // 用户点击取消的情况
    if (error === 'cancel' || error === 'close') {
      ElMessage.info({
        message: '已取消删除',
        duration: 1000
      })
    } else {
      // 其他错误情况
      ElMessage.error({
        //@ts-ignore
        message: '删除申诉失败: ' + (error.message || '未知错误'),
        duration: 2000,
        showClose: true
      })
    }
  }
}

// 初始化加载申诉列表
onMounted(() => {
  getAppealList();
});
</script>

<style scoped>
.appeal-management {
  padding: 20px;
}
</style>
